:root {
  /* Light theme */
  --bg-primary-light: #ffffff;
  --bg-secondary-light: #f8f9fa;
  --text-primary-light: #1a1a1a;
  --text-secondary-light: #424242;
  --accent-light: #3498db;
  --card-bg-light: #ffffff;
  --card-shadow-light: 0 4px 6px rgba(0, 0, 0, 0.1);
  --gradient-light: linear-gradient(
    135deg,
    var(--text-primary-light) 0%,
    var(--accent-light) 100%
  );

  /* Dark theme */
  --bg-primary-dark: #1a1a1a;
  --bg-secondary-dark: #2d2d2d;
  --text-primary-dark: #fffffff8;
  --text-secondary-dark: #ffffffe8;
  --accent-dark: #64b5f6;
  --card-bg-dark: #2d2d2d;
  --card-shadow-dark: 0 4px 6px rgba(0, 0, 0, 0.3);
  --gradient-dark: linear-gradient(
    135deg,
    var(--text-primary-dark) 0%,
    var(--accent-dark) 100%
  );
  --gradient: var(--gradient-light);

  /* Uni */
  --border-color: #89898917;
}

.light-theme .txt-pri {
  color: var(--text-primary-light);
}

.light-theme .txt-sec {
  color: var(--text-secondary-light);
}

.light-theme .bg-pri {
  background-color: var(--bg-primary-light);
}

.light-theme .bg-sec {
  background-color: var(--bg-secondary-light);
}

.light-theme .txt-acc {
  color: var(--accent-light);
}

.dark-theme .txt-pri {
  color: var(--text-primary-dark);
}

.dark-theme .txt-sec {
  color: var(--text-secondary-dark);
}

.dark-theme .bg-pri {
  background-color: var(--bg-primary-dark);
}

.dark-theme .bg-sec {
  background-color: var(--bg-secondary-dark);
}

.dark-theme .txt-acc {
  color: var(--accent-dark);
}

.dark-theme .bg-sec {
  background-color: var(--bg-secondary-dark);
}

.dark-theme .txt-acc {
  color: var(--accent-dark);
}

.warning {
  color: #bc7700 !important;
}

.error {
  color: #c30000 !important;
}

.success{
  color: #009200 !important;
}